<template>
  <a-modal title="流程进度" @editItem="editItem" :visible="show" width="100%" :forceRender="true"
    wrap-class-name="full-modal" :confirm-loading="modalLoading" @ok="modalOk" @cancel="modalCancel">
    <div class="formContent process-viewer">
      <div class="canvas" ref="waitCanvas"></div>
    </div>
  </a-modal>
</template>

<script type="ts" setup>

// 预览流程图
import bpmnViewer from "bpmn-js/lib/Viewer";
import { defineEmits,defineProps,ref ,defineExpose ,onMounted,nextTick,watch} from 'vue';
import {getBPMNXml,getBPMNNode} from '@/api/flowViewer';
import { notification,message } from 'ant-design-vue';
import ZoomScrollModule from "diagram-js/lib/navigation/zoomscroll";
import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";



const emits = defineEmits(['ok', 'cancel']);

const props=defineProps({
  editItem: {
    type: Object,
    required: true
  }
});
        // 弹框路由loading
let modalLoading = ref(false);
let bpmnModelerA = ref(null)
const bpmnXML = ref(``)
const waitCanvas = ref(null)
// 弹框显隐
let show = ref(false);

const open = () => {  
    modalLoading.value=true;
    show.value = true
    //createNewDiagram();
    modalLoading.value=false;
}

watch(() => props.editItem, (newValue) => {
  createNewDiagram();
});

onMounted(()=>{
  nextTick(()=>{
    initBPMN();
  });
})

// @Desc: 弹框关闭方法(供父组件调用)
const close = () => {
  show.value = false;
  modalLoading.value = false;
  emits('cancel');
}
defineExpose({open,close})
// 初始化bpmn流程图
const initBPMN = () => {
  bpmnModelerA = new bpmnViewer({
    additionalModules: [  //添加查看时的移动功能
      MoveCanvasModule, // 移动整个画布
      ZoomScrollModule // 
    ],
    container: waitCanvas.value
  });
  
}

const createNewDiagram = async () => {
  try {
     getBPMNXml(props.editItem.ProcessDefinitionId).then(e =>{
      bpmnXML.value=e.data.Data;
      const result =  bpmnModelerA.importXML(bpmnXML.value).then(()=>{
         // 调整在正中间
      bpmnModelerA.get('canvas').zoom('fit-viewport', 'auto');
      getNodeHightLight();
      });
     
    }).catch(err=>{
      console.log(err,1111)
      message.error(err.message || "获取流程XML失败!");
    });
   
  } catch (err) {
    console.log(err.message, err.warnings);
  }
}

//获取流程图节点高亮
const getNodeHightLight = async () => {
  getBPMNNode({id:props.editItem.ProcessDefinitionId}).then(e =>{
      let result=e.data.Data;
      setProcessStatus(result);
    }).catch(err=>{
      console.log(err,222)
      message.error(err.message || "获取流程XML失败!");
    });
    
  // let params = {
  //   processInstanceId: route.query.processInstanceId
  // }

  // let res = await client.get(api..., params)
  // if (res.code == 1) {
  //   nodeInfo.value = res.data
  //   setProcessStatus()
  // }
}

const setProcessStatus =(data)=>{
  let {CurrentFlowElementList,PreFlowElementTaskList,PreFlowElementLineList} = data;
  const canvas = bpmnModelerA.get('canvas');
  const elementRegistry = bpmnModelerA.get('elementRegistry');
  if (Array.isArray(PreFlowElementLineList)) {
    PreFlowElementLineList.forEach((item) => {
      console.log(item.Id);
      if (item != null) {
        canvas.addMarker(item.Id, 'highlight-line'); 
       
      }
    })
  }

  if (Array.isArray(PreFlowElementTaskList)) {
    PreFlowElementTaskList.forEach((item) => {     
      if (item != null){
        canvas.addMarker(item.Id, 'highlight-his');
        const ele = document.querySelector('.highlight-his').querySelector('.djs-visual rect');
        }
    });
  }

  if (Array.isArray(CurrentFlowElementList)) {
    CurrentFlowElementList.forEach((item) => {     
      if (item != null){
        canvas.addMarker(item.Id, 'highlight');
        const ele = document.querySelector('.highlight').querySelector('.djs-visual rect');
          if(ele){
              ele.setAttribute('stroke-dasharray', '4,4');
          }
        }
    });
  }
}

 // @desc: 弹框确认事件(回调)
const modalOk = () => {
  emits('ok');
}

  // @desc: 弹框取消事件(回调)
const modalCancel = () => {
  emits('cancel')
  show.value = false
}
</script>

<style lang="scss" >
@import 'bpmn-js/dist/assets/diagram-js.css';
@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
@import '@bpmn-io/properties-panel/dist/assets/properties-panel.css';

  .formContent {
    // padding: 0 20px;
    width: 100%;
    height: 100%;//calc(100vh - 450px);
    height: calc(100vh - 160px);
    position: relative;
 
    .canvas {
      // width: 100%;
      padding: 0 20px 0 0;
      height: 100%;
    }
  }

.flowMsgPopover{
    display: none;
}

.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
    fill: rgba(251, 233, 209, 1) !important;
}
.highlight g.djs-visual >:nth-child(1) {
    stroke: rgba(214, 126, 125, 1) !important;
}

.highlight-his:not(.djs-connection) .djs-visual > :nth-child(1) {
  fill: rgb(81, 228, 166) !important; 
}
.highlight-his g.djs-visual >:nth-child(1) {
  stroke: rgba(0, 190, 0, 1) !important;
}
.highlight-line g.djs-visual >:nth-child(2) {
    stroke: rgba(0, 190, 0, 1) !important;
}

.highlight-line g.djs-visual defs marker path {
  stroke: rgba(0, 190, 0, 1) !important;
  fill: rgba(0, 190, 0, 1) !important;
}

@-webkit-keyframes dynamicNode {
    to {
        stroke-dashoffset: 100%;
    }
}

.highlight{
    .djs-visual{
        -webkit-animation: dynamicNode 18S linear infinite;
        -webkit-animation-fill-mode: forwards;
    }
}
 
</style>